<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cubee 日历控件</title>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yuiloader-dom-event/yuiloader-dom-event.js"></script>
<style>
	body { font: 14px Georgia,"Times New Roman",Times,sans-serif; color: #444; }
	h1 { font-size: 26px; color: #00859D; font-family: Constantia,serif; }
	h3 { font-size: 14px; color: #555; margin: 15px 0 5px; }
	code {font-family:"Courier New"}
</style>
</head>
<body  class="yui-skin-sam">
<h1>Cubee 日历控件 v0.1,基于YUI2的版本</h1>
<hr size=1 />
<h3>静态日历，以及单击回调</h3>
<div id="J_calendar"></div>
<hr size=1 />
<h3>静态双月日历,默认选中某日</h3>
<div id="J_multipage_1"></div>
<hr size=1 />
<h3>静态三月日历</h3>
可以支持无数多个月的日历,只需增加css中的相应容器宽度
<div id="J_multipage_2"></div>
<hr size=1 />
<h3>日历日期范围,以及选择范围的回调</h3>
<div id="J_range"></div>
<hr size=1 />
<h3>日历日期范围,指定默认范围</h3>
<div id="J_default_range"></div>
<hr size=1 />
<h3>日历切换事件</h3>
只要当前月份切换，就发生switch事件
<div id="J_all_events"></div>
<hr size=1 />
<h3>Popup日历，默认点击触发，点击空白处关闭</h3>
<button id="J_popup" style="margin-left:50px;">click here!</button>
<hr size=1 />
<h3>Popup日历，单选关闭</h3>
<a href="javascript:void(0);" id="J_popup_closeable" style="margin-left:50px;">click here!</a>
<hr size=1 />
<h3>日历可操作范围</h3>
只可以选择今日之后的十天以内的日期
<div id="J_mindate_maxdate"></div>
<hr size=1 />
<h3>可选择时间</h3>
每个面板的time选择永远保持一致，而且当选择范围的时候，起始time和结束time是一致的
<div id="J_with_time"></div>
<hr size=1 />


<p style="clear:both">
在ie6,ie7,firefox2,firefox3.0/3.5/3.6,safari4.0,opera9.62,chrome3.0下测试通过<br />
author:bachi@taobao.com（拔赤）<br />
msn:lijing00333@163.com<br />
moreinfo:http://www.uedmagazine.com
</p>

<script>
<!--

var c = {};
var Y = YAHOO;
var showdate = function(n,d){//计算d天的前几天或者后几天，返回date,注：chrome下不支持date构造时的天溢出
	var uom = new Date(d-0+n*86400000);
	uom = uom.getFullYear() + "/" + (uom.getMonth()+1) + "/" + uom.getDate();
	return new Date(uom);
};

var Tloader = new YAHOO.util.YUILoader();
Tloader.addModule({
	name:'calendar-skin',
	type:'css',
	fullpath:'../skin/default.css'
});
Tloader.addModule({
	name:'calendar',
	type:'js',
	fullpath:'../calendar-yui2.js',
	requires:['element','calendar-skin']
});
Tloader.require(['calendar']);
Tloader.onSuccess = function(){
	//静态日历,单击回调
	c = new Y.Calendar('J_calendar').on('select',function(d){
		alert(d);
	});

	//静态双月日历,默认选中某日
	new Y.Calendar('J_multipage_1',{
		multi_page:2,
		selected:showdate(-2,new Date())
	});

	//静态三月日历
	new Y.Calendar('J_multipage_2',{
		multi_page:3
	});

	//选择范围,并绑定范围回调
	new Y.Calendar('J_range',{
		multi_page:2,
		range_select:true
	}).on('rangeselect',function(o){
		alert(Y.lang.dump(o));
	});

	//选择范围,指定默认范围
	new Y.Calendar('J_default_range',{
		multi_page:2,
		range_select:true,
		range:{
			start:showdate(-3,new Date()),
			end:showdate(5,new Date())
		}
	});

	//月份切换事件
	new Y.Calendar('J_all_events').on('switch',function(d){
		alert('切换事件,月份切换到'+Y.lang.dump(d));
	});

	//Popup日历,默认点击触发
	new Y.Calendar('J_popup',{
		popup:true	
	});

	//Popup日历,单选关闭
	new Y.Calendar('J_popup_closeable',{
		popup:true,
		closeable:true
	}).on('select',function(d){
		alert(Y.lang.dump(d));	
	});

	//日历可操作范围
	c = new Y.Calendar('J_mindate_maxdate',{
		mindate:new Date(),
		maxdate:showdate(10,new Date())
	});

	//日历可选择time
	c = new Y.Calendar('J_with_time',{
		withtime:true
	}).on('timeselect',function(d){
		alert(Y.lang.dump(d));	
	});
};
Tloader.insert();




/*

YUI({
	combine:true,
	base:'http://cn.yimg.com/i/yui/3.0.0/build/', 
	root:"i/yui/3.0.0/build/",  
	comboBase:"http://cn.yimg.com/combo?", 
	charset:'utf-8',
	loadOptional:true,
	modules:{
		'calendar-skin':{//默认皮肤
			fullpath:'../skin/default.css',
			type:'css'
		},
		'calendar':{
			fullpath:'calendar.js',
			requires:['calendar-skin','node']
		}
	}
}).use('calendar','console','dump',function(Y){
	new Y.Console().render();
	//alert(Y.dump(Y.UA));


	//静态日历,单击回调
	c = new Y.Calendar('J_calendar').on('select',function(d){
		alert(Y.dump(d));
		Y.log(d);	
	});

	//静态双月日历,默认选中某日
	new Y.Calendar('J_multipage_1',{
		multi_page:2,
		selected:showdate(-2,new Date())
	});

	//静态三月日历
	new Y.Calendar('J_multipage_2',{
		multi_page:3
	});

	//选择范围,并绑定范围回调
	new Y.Calendar('J_range',{
		multi_page:2,
		range_select:true
	}).on('rangeselect',function(o){
		alert(Y.dump(o));
	});

	//选择范围,指定默认范围
	new Y.Calendar('J_default_range',{
		multi_page:2,
		range_select:true,
		range:{
			start:showdate(-3,new Date()),
			end:showdate(5,new Date())
		}
	});

	//月份切换事件
	new Y.Calendar('J_all_events').on('switch',function(d){
		alert('切换事件,月份切换到'+Y.dump(d));
	});

	//Popup日历,默认点击触发
	new Y.Calendar('J_popup',{
		popup:true	
	});

	//Popup日历,单选关闭
	new Y.Calendar('J_popup_closeable',{
		popup:true,
		closeable:true
	}).on('select',function(d){
		alert(Y.dump(d));	
	});

	//日历可操作范围
	c = new Y.Calendar('J_mindate_maxdate',{
		mindate:new Date(),
		maxdate:showdate(10,new Date())
	});

	//日历可选择time
	c = new Y.Calendar('J_with_time',{
		withtime:true
	}).on('timeselect',function(d){
		alert(Y.dump(d));	
	});


});
*/
	

//-->
</script>

</body>
</html>
